<template>
	<view class="">
		<view class="mask" v-if="isShobroadbandiShare">
			<view class="share_code_box">
				<image :src="newbeautifulPoster.data" mode="widthFix" class="share_code_img"></image>

				<view class="close_icon_box">
					<image src="/static/home/icon-close-new.png" mode="" class="close_icon" @click="handleClosebroadbandShare"></image>
				</view>

				<view class="btn_box">
					<view
						class="btn_share"
						v-for="(item, index) in bottonBtnList"
						:key="index"
						:class="[isActive == index ? 'btn_share_active' : '']"
						@click="handleShareBtn(item, index)"
					>
						{{ item }}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['broadbandPoster'],
	data() {
		return {
			isShobroadbandiShare: false,
			shareImg: 'https://saler.jkcae.com/poster/package_poster/1/1/package_poster_1_1_50_546.jpg?v=1724828756',
			newbeautifulPoster: {},
			bottonBtnList: ['分享宽带海报', '进入宽带小店'],
			isActive: 0
		};
	},
	watch: {
		broadbandPoster: {
			handler(newVal) {
				this.newbeautifulPoster = newVal;
			}
		}
	},
	methods: {
		// 分享
		handleShare(val) {
			if (val.id == 0) {
				uni.setClipboardData({
					data: this.newbeautifulPoster.url,
					success: function () {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			} else if (val.id == 1) {
				uni.showLoading({
					title: '保存海报中'
				});
				uni.downloadFile({
					//下载
					url: this.newbeautifulPoster.data, //图片下载地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.hideLoading();
							uni.saveImageToPhotosAlbum({
								//保存图片到系统相册。
								filePath: res.tempFilePath, //图片文件路径
								success: function () {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none'
									});
								},
								fail: function (e) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
			} else if (val.id == 2) {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 2,
					imageUrl: this.newbeautifulPoster.data,
					success: function (res) {
						uni.showToast({
							title: '分享微信好友成功',
							icon: 'success'
						});
					},
					fail: function (err) {
						uni.showToast({
							title: '分享微信好友失败',
							icon: 'error'
						});
						return;
					}
				});
			}
		},

		// 关闭
		handleClosebroadbandShare() {
			this.$emit('handleClosebroadbandShare', '');
		},

		// 选择按钮
		handleShareBtn(item, index) {
			this.isActive = index;
			if (item == '分享宽带海报') {
				uni.showLoading({
					title: '保存海报中'
				});
				uni.downloadFile({
					//下载
					url: this.newbeautifulPoster.data, //图下载地址
					success: (res) => {
						if (res.statusCode === 200) {
							uni.hideLoading();
							uni.saveImageToPhotosAlbum({
								//保存图片到系统相册。
								filePath: res.tempFilePath, //图片文件路径
								success: function () {
									uni.showToast({
										title: '图片保存成功',
										icon: 'none'
									});
								},
								fail: function (e) {
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
						}
					}
				});
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneSession",
				// 	type: 2,
				// 	imageUrl: this.newbeautifulPoster.data,
				// 	success: function(res) {
				// 		uni.showToast({
				// 			title: '分享微信好友成功',
				// 			icon: 'success'
				// 		})
				// 	},
				// 	fail: function(err) {
				// 		uni.showToast({
				// 			title: '分享微信好友失败',
				// 			icon: 'error'
				// 		})
				// 		return
				// 	}
				// });
			} else {
				uni.navigateTo({
					url: '/pages/broadband/broadband'
				});
				// plus.runtime.openWeb(this.newbeautifulPoster.url)
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	/* 遮罩层样式 */
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;

	.share_code_box {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.share_code_img {
			width: 500rpx;
			height: 719rpx;
			border-radius: 12rpx;
		}

		.btn_box {
			position: absolute;
			bottom: -40rpx;
			left: 0;
			display: flex;
			width: 100%;

			.btn_share {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 61rpx;
				background: #f5f5f5;
				border: 1px solid #e6e6e6;
				font-family: button-font;
				font-weight: 300;
				font-size: 22rpx;
				color: #666666;
				border-radius: 0 0 12rpx 12rpx;
			}

			.btn_share_active {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 50%;
				height: 61rpx;
				background: #0e255b;
				font-family: button-font;
				font-weight: 300;
				font-size: 22rpx;
				color: #ffffff;
				border-radius: 0 0 12rpx 12rpx;
			}
		}

		.close_icon_box {
			position: absolute;
			top: -40rpx;
			right: -54rpx;

			.close_icon {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.share_btn_box {
		position: absolute;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750rpx;
		height: 212rpx;
		background: #ffffff;
		border-radius: 30rpx 30rpx 0px 0px;
		padding: 0 39rpx 0 43rpx;

		.share_btn_all {
			display: flex;
			flex-direction: column;
			align-items: center;

			.share_icon_box {
				width: 88rpx;
				height: 88rpx;

				.share_icon {
					width: 100%;
					height: 100%;
				}
			}

			.share_name {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				padding-top: 24rpx;
			}
		}
	}
}
</style>
